<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<title>图片轮转切换效果demo</title>   
<link href="./images/style.css" type="text/css" rel="stylesheet">

</head>
<body>
	<div class="poster-main">
		<div class="poster-btn poster-prev-btn"></div>
		<ul class="poster-list">
			<li class="poster-item"><a href="#"><img src="./images/slidepic1.jpg"></a>

			</li>
			<li class="poster-item"><a href="#"><img src="./images/slidepic2.jpg"></a> 
				
			</li>
			<li class="poster-item"><a href="#"><img src="./images/slidepic3.jpg"></a>
				
			</li>
			<li class="poster-item"><a href="#"><img src="./images/slidepic4.jpg"></a>
				
			</li>
			<li class="poster-item"><a href="#"><img src="./images/slidepic5.jpg"></a>
				
			</li>
			<li class="poster-item"><a href="#"><img src="./images/slidepic6.jpg"></a>
				
			</li>
			<li class="poster-item"><a href="#"><img src="./images/slidepic7.jpg"></a>
				
			</li>
			<li class="poster-item"><a href="#"><img src="./images/slidepic8.jpg"></a>
				
			</li>
			<li class="poster-item"><a href="#"><img src="./images/slidepic9.jpg"></a>
				
			</li>
		</ul>
		<div class="poster-btn poster-next-btn"></div>
	</div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="./images/Carousel.js"></script>
<script>
//$(".poster-main").Carousel("init");

$(".poster-main").Carousel({
"width":800,		
"height":260,		
"posterWidth":450,	
"posterHeight":252,
"scale":0.85,		
"speed": 500,	
"autoPlay":true,	
"delay":1500,	
"verticalAlign":"middle"	
});

</script>
</body></html>